<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .message-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .readAll {
        position: absolute;
        right: 0.32rem;
        top: 50%;
        transform: translateY(-50%);
        height: 0.34rem;
        font-size: 0.24rem;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #d90000;
        line-height: 0.34rem;
      }
      .message-tab .tabBox:nth-child(1){
        margin-right: 0.64rem;
        /* padding-right: 0.48rem; */
      }
      .message-tab .tabBox:nth-child(2){
        margin-right: 0.48rem;
      }
      .message-info {
        margin-bottom: 0.14rem;
      }
      .message-info ul,
      .message-info-bottom ul{
        padding: 0;
        margin: 0;
        list-style: none;
      }
     .info-left {
        position: absolute;
        left: 0.32rem;
        top: 0.28rem;
     }
     .info-right {
        position: absolute;
        left: 1.06rem;
        top: 0.28rem;
        width: 6.12rem;
     }
     .info-left {
         margin-right: 0.18rem;
     }
     .info-left img {
         width: 0.54rem;
         height: 0.54rem;
     }
     .info-right .info-right-top{
        height: 0.44rem;
        line-height: 0.44rem;
        margin-bottom: 0.12rem;
     }
     .info-right-top .mainBox .markIocn{
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background: #ff2c38;
        position: absolute;
        right: -0.18rem;
        top: 0.06rem;
     }
     p {
       margin: 0;
       padding: 0;
     }
     a {
       text-decoration: none;
       color: #4d5465;
     }
     /*  */
     .message-header {
    padding:0.22rem 0.32rem 0.26rem;  
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: center;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .message-tab {
    padding: 1.36rem 0.32rem 0.2rem;
    margin-bottom: 0.2rem;
  }
  .message-tab .tabBox {
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.32rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    display: inline-block;
  }
  .message-tab .tabBox.active{
    height: 0.6rem;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 0.6rem;
  }
  .message-info ul li,
  .message-info-bottom ul li{
    padding: 0.28rem 0.32rem 0.3rem 0.32rem;
    position: relative;
    height: 1.54rem;
    position: relative;
  }
  .message-info ul li .info-right-top .mainBox{
    font-size: 0.32rem;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    position: relative;
 }
 .message-info ul li .info-right-top .timeBox{
  float: right;
  font-size: 0.24rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
}
.message-info ul li .info-right-bottom {
  height: 0.4rem;
  font-size: 0.26rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  line-height: 0.4rem;
  text-overflow: -o-ellipsis-lastline;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  display: -webkit-box;  
  -webkit-line-clamp: 1;  
  -webkit-box-orient: vertical; 
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="message-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()' class="headerimg">
    <span>消息中心</span>
    <span class="readAll" onclick="setAllRead()">全部标记已读</span>
  </div>

  <!-- tab栏切换 -->
  <div class="message-tab">
    <!-- <div class="tabBox active" data-key='all'>全部  (12)</div> -->
    <div class="tabBox active" data-key='fankui'>用户反馈回复</div>
    <div class="tabBox" data-key='xitong'>系统消息</div>
    <div class="tabBox" data-key='zixun'>资讯消息</div>
  </div>

  <!-- 资讯 -->
  <div class="message-info">
      <ul>
      </ul>
  </div>

</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let token 
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {

    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    $('.message-info ul').empty()
    getFeedBackList({'pageNum':pageNum})
    // getSystemInfo({'pageNum':pageNum})
    // getzixunInfo({'pageNum':pageNum})
    // //获取token
    // jsBridge.getData('token').then(res => {
    //   console.log(res)
    //   token = res
    // })
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    $('.message-info ul').empty()
    //设置返回之后显示的内容
    let mark = $('.active').attr('data-key')
    if(mark === 'fankui'){
      getFeedBackList({'pageNum':1})
    }else if(mark === 'xitong'){
      getSystemInfo({'pageNum':1})
    }else if(mark === 'zixun'){
      getzixunInfo({'pageNum':1})
    }
  }
  //获取反馈列表
  function getFeedBackList(params){
    Server.myowninfo.myfeedback({'pageNum':params.pageNum,'pageSize':10}).then(res => {
      console.log(res)
      if(res.code === 0){
        if(res.data.code === 1){
          let list = res.data.list
          list.map((item,index) => {
            let creatTime = item.modifyDttm*1000             
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30*60*1000){
              if(nowTime - creatTime < 1*60*1000){
                item.modifyDttm = '刚刚'
              }else{
                item.modifyDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.modifyDttm = '1小时前'
                }else {
                  item.modifyDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.modifyDttm = '昨天'+hour+":"+minute
            }else{
              item.modifyDttm = year +'-'+ month+'-'+day+' '+hour+':'+minute
            }
          })

          list.map((v,i) => {
            let li = 
                `<li onclick="gomessagedetail({'messageId':'${v.messageId}','status':'${v.status}'})">
                  <div class="info-left">
                      <img src="../../images/allPic/laba.png" alt="">
                  </div>
                  <div class="info-right">
                      <div class="info-right-top">
                          <span class="mainBox">用户反馈回复
                            <span class="markIocn" style="display:${v.status === '3'?'none':'block'}"></span>
                          </span>
                          <span class="timeBox">${v.modifyDttm}</span>
                      </div>
                      <div class="info-right-bottom">
                          ${v.msgConnect}
                      </div>
                  </div>
                </li>`

              $('.message-info ul').append(li)
          })
        }else{

        }
      }else{
        jsBridge.toast('登陆失效,请重新登陆...')
      }
    })
  }
  //获取系统消息
  function getSystemInfo(params){
    Server.myowninfo.systemInfo({'pageNum':params.pageNum,'pageSize':10}).then(res => {
      console.log(res,'aaa')
      if(res.code === 0){
          let list = res.list
          list.map((item,index) => {
            let creatTime = item.createdTime*1000             
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30*60*1000){
              if(nowTime - creatTime < 1*60*1000){
                item.createdTime = '1分钟前'
              }else{
                item.createdTime = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.createdTime = '1小时前'
                }else {
                  item.createdTime = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.createdTime = '昨天'+hour+":"+minute
            }else{
              item.createdTime = year +'-'+ month+'-'+day+' '+hour+':'+minute
            }
          })

          list.map((v,i) => {
            let li = 
                `<li onclick="gosystemdetail({'articleId':'${v.articleId}'})">
                  <div class="info-left">
                      <img src="../../images/allPic/lindang.png" alt="">
                  </div>
                  <div class="info-right">
                      <div class="info-right-top">
                          <span class="mainBox">系统消息<span class="markIocn" style="display:${v.readStatus === '1'?'none':'block'}"></span></span>
                          <span class="timeBox">${v.createdTime}</span>
                      </div>
                      <div class="info-right-bottom">
                          ${v.msgContent}
                      </div>
                  </div>
                </li>`

              $('.message-info ul').append(li)
          })
      }else{
        jsBridge.toast('登陆失效,请重新登陆...')
      }
    })
  }
  //获取资讯消息
  function getzixunInfo(params){
    Server.myowninfo.zixunInfo({'pageNum':params.pageNum,'pageSize':10}).then(res => {
      console.log(res,'bbbb')
      if(res.code === 0){
          let list = res.list
          list.map((item,index) => {
            let creatTime = item.createdTime*1000             
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30*60*1000){
              if(nowTime - creatTime < 1*60*1000){
                item.createdTime = '1分钟前'
              }else{
                item.createdTime = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.createdTime = '1小时前'
                }else {
                  item.createdTime = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.createdTime = '昨天'+hour+":"+minute
            }else{
              item.createdTime = year +'-'+ month+'-'+day+' '+hour+':'+minute
            }
          })

          list.map((v,i) => {
            let li = 
                `<li onclick="gozixundetail({'articleId':'${v.articleId}','infoType':'${v.infoType}','funcCode':'${v.funcCode}'},this)">
                  <div class="info-left">
                      <img src="../../images/allPic/laba.png" alt="">
                  </div>
                  <div class="info-right">
                      <div class="info-right-top">
                          <span class="mainBox">资讯消息
                            <span class="markIocn" style="display:${v.readStatus === '1'?'none':'block'}"></span>
                          </span>
                          <span class="timeBox">${v.createdTime}</span>
                      </div>
                      <div class="info-right-bottom">
                          ${v.title?v.title:''}
                      </div>
                  </div>
                </li>`

              $('.message-info ul').append(li)
          })
      }else{
        jsBridge.toast('登陆失效,请重新登陆...')
      }
    })
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //节流
  let prev = Date.now()
  function throttle (fn, delay) {
  const now = Date.now()
  if (now - prev > delay) {
    fn()
    prev = Date.now()
  }
}
  //点击tab栏切换状态,根据选中条件获取不同数据
  $('.tabBox').on('click',function(e){
      throttle(() => {
        $(this).addClass('active').siblings().removeClass('active')
        let mark = $(this).attr('data-key')
        if(mark === 'fankui'){
          // $('.readAll').show()
          $('.message-info ul').empty()
          pageNum = 1
          getFeedBackList({'pageNum':pageNum})
        }else if(mark === 'xitong'){
          // $('.readAll').hide()
          $('.message-info ul').empty()
          pageNum = 1
          getSystemInfo({'pageNum':pageNum})
        }else if(mark === 'zixun'){
          // $('.readAll').show()
          $('.message-info ul').empty()
          pageNum = 1
          getzixunInfo({'pageNum':pageNum})
        }
      },500)
  })
  //点击标记全部已读
  function setAllRead(){
    let mark = $('.active').attr('data-key')
    if(mark === 'fankui'){
      Server.myowninfo.setfeedbackallread({}).then(res => {
        // console.log(res,'all')
        if(res.code === 0){
          $('.markIocn').hide()
        }
      })
    }else if(mark === 'xitong'){
      Server.myowninfo.setsystemsallread({}).then(res => {
        console.log(res,'all')
        if(res.code === 0){
          $('.markIocn').hide()
        }
      })
    }else if(mark === 'zixun'){
      Server.myowninfo.setzixunallread({}).then(res => {
        // console.log(res,'all')
        if(res.code === 0){
          $('.markIocn').hide()
        }
      })
    }
  }
  //跳转到反馈详情
  function gomessagedetail(params){
    jsBridge.openWindow('/html/PersonalCenter/messagedetail.html?messageId='+params.messageId+'&status='+params.status,{}, {noBar: false})
  }
  //跳转到系统消息详情
  function gosystemdetail(params){
    jsBridge.openWindow('/html/PersonalCenter/systemsinfodetail.html?articleId='+params.articleId,{}, {noBar: false})
  }
  //跳转到资讯详情
  function gozixundetail(params1,params2){
    // console.log(params1)
    //更改资讯状态
    Server.myowninfo.zixunInfoStatus({'articleId':params1.articleId}).then(res => {
      console.log(res,'genggai')
      if(res.code === 0){
        $(params2).find('.markIocn').hide()
      }
    })
    jsBridge.openWindow('/html/details/Information-details.html?infoId='+params1.articleId+'&infoType='+params1.infoType+'&funcCode='+params1.funcCode+'&isopencomment=0',{}, {noBar: false})
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.message-info').offset().top      
    let height = $('.message-info').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(Math.round(top+height-maxHeight),'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
      let mark = $('.active').attr('data-key')
      console.log(mark)
      if(mark === 'fankui'){
        pageNum++
        getFeedBackList({'pageNum':pageNum})
      }else if(mark === 'xitong'){
        pageNum++
        getSystemInfo({'pageNum':pageNum})
      }else if(mark === 'zixun'){
        pageNum++
        getzixunInfo({'pageNum':pageNum})
      }
    }
  })
</script>
</html>